<!-- 基础表格  -------页面管理下的表格管理页面 -->

<!-- <template>
    <div class='box'>
        <div class='box-1'>
            <div>
                <el-form-item style="max-width: 300px">
                    <el-input v-model="form.name" placeholder="请输入内容" />
                </el-form-item>
            </div>
            <div>
                <el-date-picker v-model="form.date1" type="date" placeholder=开始日期 style="max-width: 300px" />
                至
                <el-date-picker v-model="form.date1" type="date" placeholder=结束日期 style="max-width: 300px" />
            </div>
            <div class="box-4">
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary">添加</el-button>
                </el-form-item>
            </div>
    
        </div>
        <el-table :data="tableData" style="width: 100%" max-height="850">
            <el-table-column prop="name" label="用户名" width="230" />
            <el-table-column prop="mailbox" label="邮箱" width="260" />
            <el-table-column prop="time" label="创建时间" width="230" />
            <el-table-column prop="address" label="地址" width="230" />
            <el-table-column prop="remark" label="备注" width="230" />
            <el-table-column prop="tagName" label="tagName" width="230" />
            <el-table-column fixed="right" label="操作" width="230">
                <template #default="scope">
                    <el-button link type="primary" size="small">
                        <el-icon>
                            <View />
                        </el-icon>
                    </el-button>
                    <el-button link type="primary" size="small">
                        <el-icon>
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button class="mt-4" style="width: 100%" @click="onAddItem">123</el-button>
        <div class="box-3">
            <el-pagination background layout="prev, pager, next" :total="100" />
        </div>
    </div>

</template> -->
<template>
  <el-input v-model="input4" @input="SelectInput" style="width: 240px" placeholder="请输入用户名">
    <template #prefix>
      <el-icon class="el-input__icon">
        <search />
      </el-icon>
    </template>
  </el-input>
  <el-button plain @click="dialogFormVisible = true, BaseTitle = '添加', BaseSubtitle = '添加'">
    添加
  </el-button>

  <el-dialog v-model="dialogFormVisible" :title="BaseTitle" width="500">
    <el-form :model="store.rowData">

      <el-form-item label="Promotion username" :label-width="formLabelWidth">
        <el-input v-model="store.rowData.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Promotion email" :label-width="formLabelWidth">
        <el-input v-model="store.rowData.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Promotion remark" :label-width="formLabelWidth">
        <el-input v-model="store.rowData.remark" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Promotion time" :label-width="formLabelWidth">
        <el-input v-model="store.rowData.time" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Promotion address" :label-width="formLabelWidth">
        <el-input v-model="store.rowData.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Promotion img" :label-width="formLabelWidth">
        <el-input v-model="store.rowData.img" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="addChange">
          {{ BaseSubtitle }}
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-table :data="store.listData" style="width: 100%">
    <el-table-column fixed prop="username" label="用户名" width="150" />
    <el-table-column prop="email" label="邮箱" width="120" />
    <el-table-column prop="time" label="创建时间" width="120" />
    <el-table-column prop="remark" label="备注" width="120" />
    <el-table-column prop="address" label="地址" width="120" />
    <el-table-column label="图片" width="120">
      <template #default='scoped'>
        <el-image style="width: 30px; height: 30px" :src="scoped.row.img" alt=""></el-image>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scoped">
        <el-button link type="primary" size="small" @click="handleClick(scoped.row.id)">Detail</el-button>
        <el-button link type="primary" size="small" @click="EditChange(scoped.row)">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" @current-change='paginationPage' :current-page='store.size'
    :total="store.total" />
</template>
<script lang="ts" setup>



import { ref, onMounted, reactive } from 'vue'

import { useBaseStore } from '@/stores/Base'
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const BaseTitle = ref('添加')
const BaseSubtitle = ref('添加')
let input4 = ref('')
let showData = {}
let store = useBaseStore()
onMounted(() => {
  store.getlistData()
})
// 删除
const handleClick = (val: any) => {
  console.log('click', val)
  store.deleteData(val)
  store.getlistData()
}
// 分页
const paginationPage = (val: any) => {
  console.log(val);
  store.page = val
  store.getlistData()
}
// 编辑
const EditChange = (data: any) => {
  dialogFormVisible.value = true
  BaseTitle.value = '编辑'
  BaseSubtitle.value = '编辑'
  console.log(data);
  showData = data
  store.rowData = data
}
// 确定按钮
const addChange = (data: any) => {
  console.log(store.rowData);
  dialogFormVisible.value = false
  if (BaseTitle.value === '添加') {
    store.addBaseData()
  } else {
    console.log(store.rowData);
    store.updateBaseData()
  }

  store.getlistData()
}
// 搜索
const SelectInput= ()=>{
  let  username=input4.value
  store.SelectBaseData({username})
  // console.log(input4.value);
  
}
</script>


<style lang="scss" scoped></style>